<template>
  <div class="profile-page">
    <!-- 页面头部 -->
    <el-card class="header-card" shadow="never">
      <div class="profile-header">
        <div class="avatar-section">
          <el-avatar :size="100" :src="profile.avatar" :icon="UserFilled" class="avatar" />
          <div class="header-info">
            <h2>{{ profile.realName }}</h2>
            <p v-if="isStudent" class="student-no">学号：{{ profile.studentNo }}</p>
            <p v-else class="student-no">用户名：{{ profile.username }}</p>
            <el-tag :type="getStatusType(profile.status)" size="large">
              {{ profile.statusText }}
            </el-tag>
            <div style="margin-top: 10px; display: flex; gap: 10px; flex-wrap: wrap;">
              <el-button type="warning" size="small" @click="openEditDialog">
                <el-icon><EditPen /></el-icon> 编辑信息
              </el-button>
              <el-button v-if="isStudent" type="primary" size="small" @click="previewProfilePdf">
                <el-icon><View /></el-icon> 预览PDF档案
              </el-button>
              <el-button v-if="isStudent" type="success" size="small" @click="downloadProfilePdf">
                <el-icon><Download /></el-icon> 下载PDF档案
              </el-button>
            </div>
          </div>
        </div>
        <div v-if="isStudent" class="stats-section">
          <div class="stat-item">
            <div class="stat-value">{{ profile.averageScore || 0 }}</div>
            <div class="stat-label">平均分</div>
          </div>
          <div class="stat-divider"></div>
          <div class="stat-item">
            <div class="stat-value">{{ profile.totalCredits || 0 }}</div>
            <div class="stat-label">总学分</div>
          </div>
          <div class="stat-divider"></div>
          <div class="stat-item">
            <div class="stat-value">{{ profile.courseCount || 0 }}</div>
            <div class="stat-label">已修课程</div>
          </div>
          <div class="stat-divider"></div>
          <div class="stat-item pending">
            <div class="stat-value">{{ profile.pendingApprovalCount || 0 }}</div>
            <div class="stat-label">待审批申请</div>
          </div>
        </div>
      </div>
    </el-card>

    <el-row :gutter="20">
      <!-- 左侧列 -->
      <el-col :xs="24" :sm="24" :md="12">
        <!-- 基本信息 -->
        <el-card class="info-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <el-icon :size="18"><User /></el-icon>
              <span>基本信息</span>
            </div>
          </template>
          <div class="profile-content">
            <!-- 证件照 (仅学生) -->
            <div v-if="isStudent && profile.idPhoto" class="id-photo-container">
              <img :src="profile.idPhoto" class="id-photo" alt="证件照" />
              <div class="photo-label">证件照</div>
            </div>
            <!-- 基本信息 -->
            <el-descriptions :column="1" border class="profile-descriptions">
              <el-descriptions-item label="真实姓名">
                <span class="info-value">{{ profile.realName || '-' }}</span>
              </el-descriptions-item>
              <el-descriptions-item v-if="isStudent" label="性别">
                <el-tag :type="profile.gender === 1 ? 'primary' : 'danger'" size="small">
                  {{ profile.genderText || '-' }}
                </el-tag>
              </el-descriptions-item>
              <el-descriptions-item v-if="isStudent" label="出生日期">
                {{ profile.birthday || '-' }}
              </el-descriptions-item>
              <el-descriptions-item v-if="isStudent" label="年龄">
                {{ profile.age ? profile.age + ' 岁' : '-' }}
              </el-descriptions-item>
              <el-descriptions-item label="联系电话">
                <el-icon><Phone /></el-icon>
                {{ profile.phone || '-' }}
              </el-descriptions-item>
              <el-descriptions-item v-if="isStudent" label="家庭住址">
                <el-icon><Location /></el-icon>
                {{ profile.address || '-' }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-card>

        <!-- 学籍信息 (仅学生) -->
        <el-card v-if="isStudent" class="info-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <el-icon :size="18"><School /></el-icon>
              <span>学籍信息</span>
            </div>
          </template>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="学号">
              <span class="info-value highlight">{{ profile.studentNo || '-' }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="院系">
              {{ profile.deptName || '-' }}
            </el-descriptions-item>
            <el-descriptions-item label="班级">
              {{ profile.className || '-' }}
            </el-descriptions-item>
            <el-descriptions-item label="班主任">
              {{ profile.headTeacherName || '-' }}
            </el-descriptions-item>
            <el-descriptions-item label="入学日期">
              {{ profile.enrollDate || '-' }}
            </el-descriptions-item>
            <el-descriptions-item label="入学年份">
              {{ profile.enrollYear ? profile.enrollYear + ' 级' : '-' }}
            </el-descriptions-item>
            <el-descriptions-item label="学籍状态">
              <el-tag :type="getStatusType(profile.status)">
                {{ profile.statusText || '-' }}
              </el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>

        <!-- 账号信息 -->
        <el-card class="info-card" shadow="hover">
      <template #header>
            <div class="card-header">
              <el-icon :size="18"><Lock /></el-icon>
              <span>账号信息</span>
            </div>
      </template>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="登录账号">
              <span class="info-value">{{ profile.username || '-' }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="角色">
              <el-tag type="success">{{ profile.roleName || '-' }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="账号状态">
              <el-tag :type="profile.accountStatus == 1 ? 'success' : 'danger'">
                {{ profile.accountStatus == 1 ? '正常' : '停用' }}
              </el-tag>
            </el-descriptions-item>
          </el-descriptions>
          <div style="margin-top: 16px; text-align: center;">
            <el-button type="warning" :icon="Lock" @click="openPasswordDialog">
              修改密码
            </el-button>
          </div>
    </el-card>
      </el-col>

      <!-- 右侧列 (仅学生) -->
      <el-col v-if="isStudent" :xs="24" :sm="24" :md="12">
        <!-- 最近成绩 -->
        <el-card class="info-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <el-icon :size="18"><Reading /></el-icon>
              <span>最近成绩</span>
              <el-button type="primary" size="small" link @click="$router.push('/student/scores')">
                查看全部
              </el-button>
            </div>
          </template>
          <el-empty v-if="!profile.recentScores || profile.recentScores.length === 0" 
                    description="暂无成绩记录" :image-size="80" />
          <div v-else class="recent-list">
            <div v-for="score in profile.recentScores" :key="score.courseName" class="recent-item">
              <div class="recent-item-content">
                <div class="recent-title">{{ score.courseName }}</div>
                <div class="recent-meta">
                  <span>{{ score.semester }}</span>
                  <span class="time">{{ formatDateTime(score.createTime) }}</span>
                </div>
              </div>
              <div class="recent-score" :class="getScoreClass(score.score)">
                {{ score.score }}分
              </div>
            </div>
          </div>
        </el-card>

        <!-- 最近档案记录 -->
        <el-card class="info-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <el-icon :size="18"><Document /></el-icon>
              <span>最近档案记录</span>
            </div>
          </template>
          <el-empty v-if="!profile.recentRecords || profile.recentRecords.length === 0" 
                    description="暂无档案记录" :image-size="80" />
          <el-timeline v-else>
            <el-timeline-item 
              v-for="record in profile.recentRecords" 
              :key="record.createTime"
              :timestamp="formatDateTime(record.createTime)" 
              placement="top"
            >
              <el-card shadow="never">
                <el-tag size="small">{{ record.recordType }}</el-tag>
                <p class="record-content">{{ record.content }}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-card>

        <!-- 备注信息 -->
        <el-card v-if="profile.remark" class="info-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <el-icon :size="18"><EditPen /></el-icon>
              <span>备注信息</span>
            </div>
          </template>
          <el-alert :title="profile.remark" type="info" :closable="false" show-icon />
        </el-card>
      </el-col>
    </el-row>

    <!-- 编辑个人信息对话框 -->
    <el-dialog
      v-model="editDialogVisible"
      title="编辑个人信息"
      width="600px"
      :close-on-click-modal="false"
    >
      <el-form :model="editForm" :rules="editRules" ref="editFormRef" label-width="100px">
        <el-form-item label="头像">
          <div class="upload-section">
            <el-upload
              class="avatar-uploader"
              :action="`/api/file/upload?category=avatar`"
              :headers="{ 'satoken': token }"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="editForm.avatar" :src="editForm.avatar" class="avatar-preview" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
            <div class="upload-tip">建议上传1:1比例的图片，支持jpg/png格式，小于2MB</div>
          </div>
        </el-form-item>

        <el-form-item v-if="isStudent" label="证件照">
          <div class="upload-section">
            <el-upload
              class="id-photo-uploader"
              :action="`/api/file/upload?category=id_photo`"
              :headers="{ 'satoken': token }"
              :show-file-list="false"
              :on-success="handleIdPhotoSuccess"
              :before-upload="beforeIdPhotoUpload"
            >
              <img v-if="editForm.idPhoto" :src="editForm.idPhoto" class="id-photo-preview" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
            <div class="upload-tip">建议上传标准证件照，支持jpg/png格式，小于2MB</div>
          </div>
        </el-form-item>

        <el-form-item v-if="isStudent" label="性别" prop="gender">
          <el-radio-group v-model="editForm.gender">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item v-if="isStudent" label="出生日期" prop="birthday">
          <el-date-picker
            v-model="editForm.birthday"
            type="date"
            placeholder="选择出生日期"
            style="width: 100%"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>

        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="editForm.phone" placeholder="请输入联系电话" clearable />
        </el-form-item>

        <el-form-item v-if="isStudent" label="家庭住址" prop="address">
          <el-input 
            v-model="editForm.address" 
            type="textarea" 
            :rows="3" 
            placeholder="请输入家庭住址" 
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitEdit" :loading="submitLoading">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 修改密码对话框 -->
    <el-dialog
      v-model="passwordDialogVisible"
      title="修改密码"
      width="500px"
      :close-on-click-modal="false"
    >
      <el-form :model="passwordForm" :rules="passwordRules" ref="passwordFormRef" label-width="100px">
        <el-form-item label="当前密码" prop="oldPassword">
          <el-input 
            v-model="passwordForm.oldPassword" 
            type="password" 
            placeholder="请输入当前密码" 
            show-password 
            clearable 
          />
        </el-form-item>

        <el-form-item label="新密码" prop="newPassword">
          <el-input 
            v-model="passwordForm.newPassword" 
            type="password" 
            placeholder="请输入新密码（6-20位）" 
            show-password 
            clearable 
          />
        </el-form-item>

        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input 
            v-model="passwordForm.confirmPassword" 
            type="password" 
            placeholder="请再次输入新密码" 
            show-password 
            clearable 
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="passwordDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitPasswordChange" :loading="passwordLoading">
            确定修改
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { 
  UserFilled, 
  User, 
  Phone, 
  Location, 
  School, 
  Lock, 
  Reading, 
  Document,
  EditPen,
  Download,
  View,
  Plus
} from '@element-plus/icons-vue'
import { getMyProfile, updateMyProfile } from '@/api/student'
import { getUserProfile, updateUserProfile } from '@/api/user'
import { useUserStore } from '@/store/user'
import request from '@/utils/request'

const userStore = useUserStore()
const isStudent = computed(() => userStore.userInfo?.roleCode === 'student')

const profile = ref<any>({})
const loading = ref(false)
const token = ref(localStorage.getItem('token') || '')

// 编辑对话框
const editDialogVisible = ref(false)
const editFormRef = ref<FormInstance>()
const submitLoading = ref(false)
const editForm = reactive({
  avatar: '',
  idPhoto: '',
  gender: 1,
  birthday: '',
  phone: '',
  address: ''
})

// 表单验证规则（动态，根据角色不同）
const editRules = computed<FormRules>(() => {
  const rules: FormRules = {
    phone: [
      { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
    ]
  }
  
  // 学生才需要验证性别和出生日期
  if (isStudent.value) {
    rules.gender = [
      { required: true, message: '请选择性别', trigger: 'change' }
    ]
    rules.birthday = [
      { required: true, message: '请选择出生日期', trigger: 'change' }
    ]
  }
  
  return rules
})

// 修改密码
const passwordDialogVisible = ref(false)
const passwordFormRef = ref<FormInstance>()
const passwordLoading = ref(false)
const passwordForm = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 密码验证规则
const passwordRules: FormRules = {
  oldPassword: [
    { required: true, message: '请输入当前密码', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度为6-20位', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请再次输入新密码', trigger: 'blur' },
    {
      validator: (_rule, value, callback) => {
        if (value !== passwordForm.newPassword) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

/**
 * 加载个人档案
 */
const loadProfile = async () => {
  loading.value = true
  try {
    if (isStudent.value) {
      // 学生：加载完整档案
      const data = await getMyProfile()
      profile.value = data || {}
    } else {
      // 教师/管理员/家长：加载基本信息
      const data = await getUserProfile()
      
      // 获取角色名称映射
      const roleMap: Record<string, string> = {
        'admin': '管理员',
        'teacher': '教师',
        'parent': '家长'
      }
      const roleCode = userStore.userInfo?.roleCode || ''
      
      profile.value = {
        ...data,
        // 映射字段名称
        accountStatus: data.status, // status -> accountStatus
        roleName: roleMap[roleCode] || data.roleCode || '未知', // 添加角色名称
        statusText: data.status === 1 ? '在职' : '离职',
        status: data.status || 1
      }
    }
  } catch (error: any) {
    console.error('加载个人档案失败', error)
    ElMessage.error(error?.message || '加载失败')
  } finally {
    loading.value = false
  }
}

/**
 * 获取状态类型
 */
const getStatusType = (status: number) => {
  const typeMap: Record<number, string> = {
    1: 'success',  // 在籍
    2: 'warning',  // 休学
    3: 'info',     // 毕业
    4: 'danger'    // 退学
  }
  return typeMap[status] || ''
}

/**
 * 获取成绩样式
 */
const getScoreClass = (score: number) => {
  if (score >= 90) return 'excellent'
  if (score >= 80) return 'good'
  if (score >= 60) return 'pass'
  return 'fail'
}

/**
 * 格式化日期时间
 */
const formatDateTime = (dateTime: string) => {
  if (!dateTime) return '-'
  return dateTime.replace('T', ' ').substring(0, 19)
}

/**
 * 打开编辑对话框
 */
const openEditDialog = () => {
  editForm.avatar = profile.value.avatar || ''
  editForm.idPhoto = profile.value.idPhoto || ''
  editForm.gender = profile.value.gender || 1
  editForm.birthday = profile.value.birthday || ''
  editForm.phone = profile.value.phone || ''
  editForm.address = profile.value.address || ''
  
  // 重置表单验证状态
  if (editFormRef.value) {
    editFormRef.value.clearValidate()
  }
  
  editDialogVisible.value = true
}

/**
 * 打开修改密码对话框
 */
const openPasswordDialog = () => {
  passwordForm.oldPassword = ''
  passwordForm.newPassword = ''
  passwordForm.confirmPassword = ''
  passwordDialogVisible.value = true
}

/**
 * 上传头像成功
 */
const handleAvatarSuccess = (response: any) => {
  if (response.code === 200 && response.data) {
    // response.data 是 FileInfoVO 对象，需要提取 fileUrl
    editForm.avatar = response.data.fileUrl || response.data
    ElMessage.success('头像上传成功')
  } else {
    ElMessage.error(response.message || '上传失败')
  }
}

/**
 * 上传头像前的检查
 */
const beforeAvatarUpload = (file: File) => {
  const isImage = file.type === 'image/jpeg' || file.type === 'image/png'
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isImage) {
    ElMessage.error('头像只能是 JPG/PNG 格式!')
    return false
  }
  if (!isLt2M) {
    ElMessage.error('头像大小不能超过 2MB!')
    return false
  }
  return true
}

/**
 * 上传证件照成功
 */
const handleIdPhotoSuccess = (response: any) => {
  if (response.code === 200 && response.data) {
    // response.data 是 FileInfoVO 对象，需要提取 fileUrl
    editForm.idPhoto = response.data.fileUrl || response.data
    ElMessage.success('证件照上传成功')
  } else {
    ElMessage.error(response.message || '上传失败')
  }
}

/**
 * 上传证件照前的检查
 */
const beforeIdPhotoUpload = (file: File) => {
  const isImage = file.type === 'image/jpeg' || file.type === 'image/png'
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isImage) {
    ElMessage.error('证件照只能是 JPG/PNG 格式!')
    return false
  }
  if (!isLt2M) {
    ElMessage.error('证件照大小不能超过 2MB!')
    return false
  }
  return true
}

/**
 * 提交编辑
 */
const submitEdit = async () => {
  if (!editFormRef.value) return
  
  await editFormRef.value.validate(async (valid) => {
    if (valid) {
      submitLoading.value = true
      
      try {
        if (isStudent.value) {
          // 学生：更新完整档案（包含性别、出生日期、地址等）
          await updateMyProfile(editForm)
        } else {
          // 教师/管理员/家长：只更新头像和电话
          await updateUserProfile({
            avatar: editForm.avatar,
            phone: editForm.phone,
            realName: profile.value.realName
          } as any)
        }
        
        ElMessage.success('修改成功')
        editDialogVisible.value = false
        await loadProfile() // 重新加载档案
      } catch (error: any) {
        console.error('修改失败', error)
        ElMessage.error(error?.message || '修改失败')
      } finally {
        submitLoading.value = false
      }
    }
  })
}

/**
 * 预览PDF档案（在线查看）
 */
const previewProfilePdf = () => {
  const token = localStorage.getItem('token')
  window.open(`/api/student/profile/preview-pdf?satoken=${token}`, '_blank')
  ElMessage.success('正在打开PDF预览...')
}

/**
 * 下载PDF档案
 */
const downloadProfilePdf = () => {
  const token = localStorage.getItem('token')
  window.open(`/api/student/profile/download-pdf?satoken=${token}`, '_blank')
  ElMessage.success('正在下载PDF档案...')
}

/**
 * 提交修改密码
 */
const submitPasswordChange = async () => {
  if (!passwordFormRef.value) return
  
  await passwordFormRef.value.validate(async (valid) => {
    if (valid) {
      passwordLoading.value = true
      
      try {
        await request({
          url: '/user/change-password',
          method: 'post',
          data: {
            oldPassword: passwordForm.oldPassword,
            newPassword: passwordForm.newPassword
          }
        })
        
        ElMessage.success('密码修改成功，请重新登录')
        passwordDialogVisible.value = false
        
        // 清空用户信息并跳转到登录页
        setTimeout(() => {
          userStore.logout()
          window.location.href = '/login'
        }, 1500)
      } catch (error: any) {
        console.error('修改密码失败', error)
        ElMessage.error(error?.message || '修改密码失败')
      } finally {
        passwordLoading.value = false
      }
    }
  })
}

onMounted(() => {
  loadProfile()
})
</script>

<style scoped lang="scss">
.profile-page {
  padding: 24px;
  background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
  min-height: calc(100vh - 60px);

  .header-card {
    margin-bottom: 24px;
    border-radius: 16px;
    border: none;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    background: white;

    .profile-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 24px;
      padding: 32px;

      .avatar-section {
        display: flex;
        align-items: center;
        gap: 24px;

        .avatar {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
          border: 4px solid white;
        }

        .header-info {
          h2 {
            margin: 0 0 10px 0;
            font-size: 28px;
            font-weight: 600;
            color: #2c3e50;
            letter-spacing: -0.5px;
          }

          .student-no {
            margin: 0 0 12px 0;
            color: #6c757d;
            font-size: 15px;
            font-weight: 500;
          }
          
          .el-tag {
            border-radius: 8px;
            padding: 6px 16px;
            font-weight: 500;
          }
          
          .el-button {
            border-radius: 8px;
            height: 36px;
            padding: 0 20px;
            font-weight: 500;
            transition: all 0.3s ease;
            
            &:hover {
              transform: translateY(-2px);
              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            }
          }
        }
      }

      .stats-section {
        display: flex;
        align-items: center;
        gap: 32px;
        padding: 24px 32px;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        border-radius: 12px;

        .stat-item {
          text-align: center;

          .stat-value {
            font-size: 32px;
            font-weight: 700;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            line-height: 1;
            margin-bottom: 8px;
          }

          .stat-label {
            font-size: 13px;
            color: #6c757d;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.5px;
          }

          &.pending .stat-value {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
          }
        }

        .stat-divider {
          width: 1px;
          height: 48px;
          background: linear-gradient(180deg, transparent 0%, #dee2e6 50%, transparent 100%);
        }
      }
    }
    
    :deep(.el-card__body) {
      padding: 0;
    }
  }

  .info-card {
    margin-bottom: 24px;
    border-radius: 16px;
    border: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    background: white;

    &:hover {
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
      transform: translateY(-2px);
    }

    .card-header {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 18px;
      font-weight: 600;
      color: #2c3e50;
      flex: 1;
      justify-content: space-between;
      
      .el-icon {
        color: #667eea;
      }
      
      .el-button {
        font-size: 14px;
        border-radius: 6px;
        height: 32px;
      }
    }

    .info-value {
      font-weight: 600;
      color: #2c3e50;

      &.highlight {
        color: #667eea;
        font-size: 17px;
        font-weight: 700;
      }
    }
    
    :deep(.el-descriptions) {
      .el-descriptions__label {
        font-weight: 500;
        color: #6c757d;
      }
      
      .el-descriptions__content {
        color: #2c3e50;
      }
    }

    .recent-list {
      .recent-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        border-radius: 12px;
        background: #f8f9fa;
        margin-bottom: 12px;
        transition: all 0.3s ease;

        &:hover {
          background: #e9ecef;
          transform: translateX(4px);
        }

        &:last-child {
          margin-bottom: 0;
        }

        .recent-item-content {
          flex: 1;

          .recent-title {
            font-size: 15px;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 6px;
          }

          .recent-meta {
            font-size: 13px;
            color: #6c757d;
            display: flex;
            gap: 16px;
            align-items: center;

            .time {
              color: #adb5bd;
            }
          }
        }

        .recent-score {
          font-size: 24px;
          font-weight: 700;
          padding: 8px 16px;
          border-radius: 10px;
          min-width: 80px;
          text-align: center;

          &.excellent {
            color: #10b981;
            background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
          }

          &.good {
            color: #3b82f6;
            background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
          }

          &.pass {
            color: #f59e0b;
            background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
          }

          &.fail {
            color: #ef4444;
            background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
          }
        }
      }
    }

    .record-content {
      margin: 10px 0 0 0;
      font-size: 14px;
      color: #495057;
      line-height: 1.7;
    }
    
    :deep(.el-timeline) {
      padding-left: 8px;
      
      .el-timeline-item__timestamp {
        color: #6c757d;
        font-size: 13px;
      }
      
      .el-card {
        border-radius: 12px;
        border: 1px solid #e9ecef;
        transition: all 0.3s ease;
        
        &:hover {
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }
      }
    }
  }

  // 响应式
  @media (max-width: 768px) {
    padding: 16px;

    .header-card .profile-header {
      flex-direction: column;
      align-items: flex-start;
      padding: 24px;

      .stats-section {
        width: 100%;
        justify-content: space-around;
        padding: 16px;

        .stat-divider {
          display: none;
        }
      }
    }
  }
}

// 图片上传样式
.upload-section {
  display: flex;
  flex-direction: column;
  gap: 12px;

  .upload-tip {
    font-size: 13px;
    color: #6c757d;
    line-height: 1.6;
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 3px solid #667eea;
  }
}

:deep(.avatar-uploader),
:deep(.id-photo-uploader) {
  .el-upload {
    border: 2px dashed #dee2e6;
    border-radius: 12px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
    background: #f8f9fa;

    &:hover {
      border-color: #667eea;
      background: white;
      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
    }
  }

  .avatar-uploader-icon {
    font-size: 32px;
    color: #adb5bd;
    width: 140px;
    height: 140px;
    text-align: center;
    line-height: 140px;
  }

  .avatar-preview,
  .id-photo-preview {
    width: 140px;
    height: 140px;
    display: block;
    object-fit: cover;
  }
}

// 个人信息页面证件照显示样式
.profile-content {
  display: flex;
  gap: 24px;
  align-items: flex-start;

  .id-photo-container {
    flex-shrink: 0;
    text-align: center;

    .id-photo {
      width: 140px;
      height: 180px;
      object-fit: cover;
      border: 3px solid #f8f9fa;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
      display: block;
      transition: all 0.3s ease;
      
      &:hover {
        transform: scale(1.05);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
      }
    }

    .photo-label {
      margin-top: 12px;
      font-size: 13px;
      color: #6c757d;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
  }

  .profile-descriptions {
    flex: 1;
  }

  @media (max-width: 768px) {
    flex-direction: column;
    align-items: center;

    .id-photo-container {
      margin-bottom: 20px;
    }

    .profile-descriptions {
      width: 100%;
    }
  }
}

// 对话框样式优化
:deep(.el-dialog) {
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18);
  
  .el-dialog__header {
    padding: 24px 24px 16px;
    border-bottom: 1px solid #f0f0f0;
    
    .el-dialog__title {
      font-size: 20px;
      font-weight: 600;
      color: #2c3e50;
    }
  }
  
  .el-dialog__body {
    padding: 24px;
  }
  
  .el-form-item__label {
    font-weight: 500;
    color: #2c3e50;
  }
  
  .el-input__inner,
  .el-textarea__inner {
    border-radius: 8px;
    border-color: #dee2e6;
    
    &:focus {
      border-color: #667eea;
      box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }
  }
  
  .dialog-footer {
    .el-button {
      border-radius: 8px;
      height: 40px;
      padding: 0 24px;
      font-weight: 500;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }
    }
  }
}
</style>
